{% macro tabPages(data) %}

<ul class="nav nav-tabs" id="myTab" role="tablist">
    {% for item in data %}
    <li class="nav-item">
        <a class="nav-link {% if loop.first %}active{% endif %}" 
           id="{{ item.tabname }}-tab" 
           data-toggle="tab" 
           href="#{{ item.tabname }}" 
           role="tab" 
           aria-controls="{{ item.tabname }}" 
           aria-selected="{% if loop.first %}true{% else %}false{% endif %}">
            {{ item.tabname }}
        </a>
    </li>
    {% endfor %}
</ul>

<div class="tab-content" id="myTabContent">
    {% for item in data %}
    <div class="tab-pane fade {% if loop.first %}show active{% endif %}"
         id="{{ item.tabname }}"
         role="tabpanel"
         aria-labelledby="{{ item.tabname }}-tab">
        {{ item.html | safe }}
    </div>
    {% endfor %}
</div>
{% endmacro %}